<template>
  <div>
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-title="{ searchForm, component }">
        <a-input v-model.trim="searchForm[component.dataIndex]" :style="{ width: '240px' }" allow-clear placeholder="请输入标题">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-link v-hasPermi="['system:announcement:edit']" v-if="record.sendStatus != 1" @click="handleEdit(record)">
          编辑
        </a-link>
        <a-dropdown>
          <a-link
            >更多
            <icon-down />
          </a-link>
          <template #content>
            <a-doption v-hasPermi="['system:announcement:remove']" v-if="record.sendStatus != 1" @click="handleDelete(record)">
              删除
            </a-doption>
            <a-doption v-hasPermi="['system:announcement:quash']" v-if="record.sendStatus == 1" @click="handleQuash(record)">
              撤销
            </a-doption>
            <a-doption v-hasPermi="['system:announcement:publish']" v-if="record.sendStatus == 0" @click="handlePublish(record)">
              发布
            </a-doption>
            <a-doption @click="handleSee(record)">查看</a-doption>
          </template>
        </a-dropdown>
      </template>
    </ma-crud>
    <announcement-detail ref="announcementRef" />
  </div>
</template>
<script lang="ts" setup>
import {
  addAnnouncement,
  delAnnouncement,
  listAnnouncement,
  publishAnnouncement,
  quashAnnouncement,
  updateAnnouncement
} from "@/api/system/announcement";
import { SysAnnouncementVo } from "@/api/system/announcement/types";
import { Message, Modal } from "@arco-design/web-vue";
import useLoading from "@/hooks/useLoading";
import AnnouncementDetail from "@/views/system/announcement/components/announcement-detail.vue";

const crudRef = ref();
const announcementRef = ref();
const { loading, setLoading } = useLoading(false);

const crud = reactive({
  id: "id",
  pk: "id",
  title: "公告查询",
  formLayout: "horizontal",
  formOption: {
    width: 800,
    bodyStyle: {
      height: "500px",
      overflowY: "scroll"
    }
  },
  api: listAnnouncement,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 160,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addAnnouncement, auth: ["system:announcement:add"], text: "新增", show: true },
  edit: { api: updateAnnouncement, auth: ["system:announcement:edit"], text: "编辑", show: false },
  beforeOpenEdit: (record: any) => {
    if (record.userIds) {
      record.userIds = record.userIds.split(",");
    }
    return true;
  }
});
const columns = reactive([
  {
    title: "编号",
    dataIndex: "id",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "标题",
    dataIndex: "title",
    search: true,
    align: "center",
    commonRules: {
      required: true,
      message: "请输入标题"
    }
  },
  {
    title: "摘要",
    dataIndex: "msgAbstract",
    formType: "textarea",
    align: "center",
    hide: true,
    commonRules: {
      required: true,
      message: "请输入摘要"
    }
  },
  {
    title: "消息类型",
    dataIndex: "msgCategory",
    formType: "radio",
    align: "center",
    dict: {
      name: "sys_notice_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 1
  },
  {
    title: "发布人",
    dataIndex: "senderName",
    align: "center",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "优先级",
    dataIndex: "priority",
    formType: "radio",
    align: "center",
    dict: {
      name: "sys_notice_priority_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    title: "接收用户",
    dataIndex: "msgType",
    formType: "radio",
    align: "center",
    dict: {
      name: "sys_notice_user_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: "ALL",
    onControl: (value: any, maFormObject: any) => {
      const service = maFormObject.getColumnService();
      const dataIndexList = ["userIds"];
      if (value === "ALL") {
        dataIndexList.map(name => service.get(name).setAttr("display", false));
        return;
      }
      dataIndexList.map(name => service.get(name).setAttr("display", true));
    }
  },
  {
    title: "指定用户",
    dataIndex: "userIds",
    formType: "user-select",
    align: "center",
    echoName: "userNames", // 回显字段名
    hide: true,
    commonRules: {
      required: true,
      message: "请选择指定用户"
    }
  },
  {
    title: "发布状态",
    dataIndex: "sendStatus",
    align: "center",
    formType: "radio",
    addDisplay: false,
    editDisplay: false,
    dict: {
      name: "sys_notice_status_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    }
  },
  {
    title: "发布时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "撤销时间",
    dataIndex: "cancelTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "内容",
    dataIndex: "msgContent",
    align: "center",
    formType: "editor",
    hide: true
  }
]);
// 删除
const handleDelete = (row: SysAnnouncementVo) => {
  const id: any = row.id;
  const desc = row?.title == undefined ? "当前选中附件编号为 " : " 当前选中标题名称为 ";
  const content = row?.title == undefined ? id : row?.title;
  Modal.warning({
    titleAlign: "start",
    alignCenter: false,
    hideCancel: false,
    width: "500",
    title: "提示",
    okLoading: loading.value,
    content: () =>
      h("div", null, [desc, h("span", { style: "color: red;font-weight: 700;font-size: 16px" }, content), " 的数据项?"]),
    onBeforeOk: async () => {
      await delAnnouncement(id);
      setLoading(false);
      crudRef.value?.refresh();
    }
  });
};
// 撤销
const handleQuash = async (record: SysAnnouncementVo) => {
  crudRef.value.setLoading(true);
  try {
    const res: any = await quashAnnouncement(record.id);
    Message.success(res.msg);
  } finally {
    crudRef.value?.refresh();
  }
};
// 发布
const handlePublish = async (record: SysAnnouncementVo) => {
  crudRef.value.setLoading(true);
  try {
    const res: any = await publishAnnouncement(record.id);
    Message.success(res.msg);
  } finally {
    crudRef.value?.refresh();
  }
};
// 查看
const handleSee = (record: SysAnnouncementVo) => {
  announcementRef.value?.show(record);
};
// 编辑
const handleEdit = async (record: SysAnnouncementVo) => {
  await crudRef.value?.editAction(record);
};
</script>
